<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>备忘录案例</title>
</head>
<body>

<div id="app">
    <p>
        <input type="text" placeholder="请输入备忘录" v-model="info"><button @click="add">添加备忘录</button>
    </p>
    <h3>备忘录列表</h3>
    <ul>
        <li v-for="(memo,index) in  memos ">{{memo}}<button @click="deleteById(index)">删除</button></li>
    </ul>
    <span  v-show="memos.length==0">没有备忘录请添加</span>

    <p>
        <button  @click="clear">清空备忘录</button> <span>备忘录一共有 {{memos.length}} 条 </span>
    </p>

</div>

<script src="../vue.js"></script>

<script>
    const vm = new Vue({
        el:'#app',
        data:{
            memos:[   //  初始话备忘录数据
                '备忘录1','备忘录2','备忘录3'
            ],
            info:''
        },
        methods:{
            add(){

                if(this.info.trim().length==0){
                    alert("请填写备忘录")
                    this.info = ''
                    return
                }
                this.memos.unshift(this.info)
                this.info = ''
            },
            clear(){  // 清空备忘录
                this.memos = []
            },
            deleteById(index){
                this.memos.splice(index,1)
            }
        }
    })
</script>
</body>
</html>